<template>
    <ul class="list">
      <li
        class="item"
        v-for="(item,key) of cities"
        :key="key"
        @touchstart="handleTouchStart"
        @touchmove="handleTouchMove"
        @touchend="handleTouchEnd"
        @click="handleLetterClick"
      >
        <!--为每个字母添加一个点击事件-->
        {{key}}
      </li>
    </ul>
</template>

<script>
    export default {
        name: "CityAlphabet",
        props:{
          cities:Object
        },
       data(){
           return{
             touchStatus: false
           }
        },
        methods:{
          handleLetterClick(e){
            /*希望把点击得到的字母值传递给List组件，然后让List对应的区块显示出来
            * 就要做一个兄弟组件之间的传值
            * 之前讲过使用bus进行传值
            * 这里就是简单的兄弟组件，所以使用一种比较简单的方法：
            * 先让Alphabet传递给City，再让City转发给List组件
            * */
            /*点击的时候向外触发事件，事件的名字就叫做change,事件携带的参数就是e.target.innerText*/
            this.$emit('change',e.target.innerText);
            /*由City组件监听这个事件，去City.vue中编写代码*/
          },
          handleTouchStart(){
            this.touchStatus = true
          },
          handleTouchMove(){
            if (this.touchStatus){

            }
          },
          handleTouchEnd(){
            this.touchStatus = false
          }
        }
    }
</script>

<style scoped lang="stylus">
  @import "../../../assets/styles/varibles.styl"
  .list
    display: flex
    flex-direction: column
    justify-content: center
    position: absolute
    top: 1.58rem
    right: 0
    bottom: 0
    width: .4rem
    .item
      line-height: .4rem
      text-align: center
      color: $baColor
</style>
